<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米官网</title>
    <!-- 引入css -->
    <link rel="shortcut icon" href="../images/favicon.ico">
     <!-- 引入字体图标 -->
	 <link rel="stylesheet" href="../font/iconfont.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/gw.css">
    <link rel="stylesheet" href="../css/nav.css">
    
    <link rel="stylesheet" href="../swiper-7.4.1/swiper/swiper-bundle.min.css"/>
    <style>
        .swiper {
            width: 100%;
            margin-bottom: 10px;
        }

        .swiper img {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="nav">
        <div class="logo">
            <a href="#">
                <img src="../images/mi-logo.png" alt="">
            </a>
        </div>

        <div class="nav-l">
            <ul>
                <li>
                    <a href="#">小米官网</a>
                </li>
                <li>
                    <a href="shop.html">小米商城</a>
                </li>
                <li>
                    <a href="#">小米影像</a>
                </li>
                <li>
                    <a href="#">MIUI</a>
                </li>
                <li>
                    <a href="#">loT</a>
                </li>
                <li>
                    <a href="#">云服务</a>
                </li>
                <li>
                    <a href="#">天星数科</a>
                </li>
                <li>
                    <a href="#">有品</a>
                </li>
                <li>
                    <a href="#">小爱开放平台</a>
                </li>
                <li>
                    <a href="#">企业团购</a>
                </li>
                <li>
                    <a href="#">Location</a>
                </li>
            </ul>
        </div>

        <div class="nav-2">
            <ul>
                <li>
                    <a href="login.html">登录</a>
                </li>
                <li>
                    <a href="index-4.html"><span> | </span>注册</a>
                </li>
            </ul>
        </div>
    </div>
    <div class="box">
        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../images/official/official1-1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="../images/official/official1-2.jpg" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

        </div>

        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../images/official/official2-1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="../images/official/official2-2.jpg" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

        </div>

        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../images/official/official3-1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="../images/official/official3-2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="../images/official/official3-3.jpg" alt=""></div>

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

        </div>

        <div class="swiper">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../images/official/official4-1.jpg" alt=""></div>
                <div class="swiper-slide"><img src="../images/official/official4-2.jpg" alt=""></div>
                <div class="swiper-slide"><img src="../images/official/official4-3.jpg" alt=""></div>
                <div class="swiper-slide"><img src="../images/official/official4-4.jpg" alt=""></div>


            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

        </div>

        <div class="last">
            <img src="../images/official/official5.jpeg" alt="">
        </div>

        <div class="last">
            <div class="last-1">
                <img src="../images/official/official6-1.jpg" alt="">
            </div>
            <div class="last-2">
                <img src="../images/official/official6-2.jpg" alt="">
            </div>
            
        </div>
    </div>
    <div class="big-3">
        <div class="footer">
            <div class="footer-top">
                <ul class="footer-ul">

                    <li><a href="#"><i class="iconfont">&#xe614;
                            </i> 预约维修服务</a><span class="footer-fgx">|</span></li>
                    <li><a href="#"><i class="iconfont">&#xe6cc;
                            </i> 7无理由退货</a><span class="footer-fgx">|</span></li>
                    <li><a href="#"><i class="iconfont">&#xe645;
                            </i> 15天免费换货</a><span class="footer-fgx">|</span></li>
                    <li><a href="#"><i class="iconfont">&#xf0081;
                            </i> 满69元包邮</a><span class="footer-fgx">|</span></li>
                    <li><a href="#"><i class="iconfont">&#xe609;
                            </i> 1110余家售后网点</a></li>
                </ul>
            </div>
            <div class="footer-bod clearfix">
                <dl>
                    <dt>
                        <a href="#">
                            帮助中心
                        </a>
                    </dt>
                    <dd>
                        <a href="#">
                            账户管理
                        </a>
                    </dd>
                    <dd>
                        <a href="#">
                            购物指南
                        </a>
                    </dd>
                    <dd>
                        <a href="#">
                            订单操作
                        </a>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <a href="#">
                            服务支持
                        </a>
                    </dt>
                    <dd>
                        <a href="#">
                            售后政策
                        </a>
                    </dd>
                    <dd>
                        <a href="#">
                            资助服务
                        </a>
                    </dd>
                    <dd>
                        <a href="#">
                            相关下载
                        </a>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <a href="#">
                            线下门店
                        </a>
                    </dt>
                    <dd>
                        <a href="#">
                            小米之家
                        </a>
                    </dd>
                    <dd>
                        <a href="#">
                            服务网点
                        </a>
                    </dd>
                    <dd>
                        <a href="#">
                            授权体验店
                        </a>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <a href="#">
                            关于小米
                        </a>
                    </dt>
                    <dd>
                        <a href="#">
                            了解小米
                        </a>
                    </dd>
                    <dd>
                        <a href="#">
                            加入小米
                        </a>
                    </dd>
                    <dd>
                        <a href="#">
                            投资者联系
                        </a>
                    </dd>
                </dl>
                <dl>
                    <dt>
                        <a href="#">
                            关注我们
                        </a>
                    </dt>
                    <dd>
                        <a href="#">
                            新浪微博
                        </a>
                    </dd>
                    <dd>
                        <a href="#">
                            官方微博
                        </a>
                    </dd>
                    <dd>
                        <a href="#">
                            联系我们
                        </a>
                    </dd>
                </dl>
            </div>
        </div>
    </div>

    <div class="big-4">
        <img src="../images/big-4.png" alt="">
    </div>
    
    <script src="../swiper-7.4.1/swiper/swiper-bundle.min.js"></script>
    <script>
        window.onscroll = function(){
            if(window.pageYOffset> 200){
                document.querySelector('.nav').style.backgroundColor = 'black'
            }
            else{
                document.querySelector('.nav').style.backgroundColor = ' rgba(0, 0, 0, 0)'
            }
        }
        var mySwiper = new Swiper('.swiper', {
            //direction: 'vertical',  垂直切换选项
            loop: true, // 循环模式选项
            autoplay: {
                delay: 3000,
                stopOnLastSlide: false,
                disableOnInteraction: true,
            },
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },

            // 如果需要前进后退按钮
            //   navigation: {
            //     nextEl: '.swiper-button-next',
            //     prevEl: '.swiper-button-prev',
            //   },

            // 如果需要滚动条
            //   scrollbar: {
            //     el: '.swiper-scrollbar',
            //   },
        })        
    </script>
</body>

</html>